<template>
  <div class="dialog" :style="{ width: width + 'px', height: height + 'px', top: top }">
    <div class="dialog-title">
      <div class="title-text">{{ title }}</div>
      <img src="/img/close.png" alt="关闭" style="width: 20px; height: 20px;cursor: pointer;" @click="close" />
    </div>
    <div class="dialog-content">
      <slot name="content" />
    </div>
    <!-- 边框 -->
    <div class="borber-lefttop">
      <img src="/img/dialog-lefttop.png" alt="" />
    </div>
    <div class="borber-leftbottom">
      <img src="/img/dialogleftbottom.png" alt="" />
    </div>
    <div class="borber-righttop">
      <img src="/img/dialogrighttop.png" alt="" />
    </div>
    <div class="borber-rightbottom">
      <img src="/img/dialogrightbottom.png" alt="" />
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, toRefs } from 'vue'
  const props = defineProps({
    title: 'string',
    width: Number,
    height: Number,
    top: {
      type: String,
      default: '20%',
    },
  })
  const { title, width, height } = toRefs(props)
  const emit = defineEmits(['close'])

  const close = () => {
    emit('close')
  }
</script>

<style scoped lang="scss">
  .dialog {
    position: absolute;
    top: 20%;
    left: 50%;
    background-color: rgba(13, 25, 32, 0.9);
    padding: 10px 30px;
    box-sizing: border-box;
    z-index: 10;
    animation: top_move 1s;
    transform: translateX(-50%) translateY(0);
    .dialog-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      .title-text {
        color: #ffffff;
        font-size: 20px;
      }
    }
    .borber-lefttop {
      position: absolute;
      top: 0;
      left: 0;
      img {
        vertical-align: top;
      }
    }
    .borber-leftbottom {
      position: absolute;
      bottom: 0;
      left: 0;
      img {
        vertical-align: bottom;
      }
    }
    .borber-righttop {
      position: absolute;
      top: 0;
      right: 0;
      img {
        vertical-align: top;
      }
    }
    .borber-rightbottom {
      position: absolute;
      bottom: 0;
      right: 0;
      img {
        vertical-align: bottom;
      }
    }
  }
  @keyframes top_move {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-50%) translateY(300px);
    }
    25% {
      opacity: 1;
      -webkit-transform: translateX(-50%) translateY(0px);
    }
    40% {
      -webkit-transform: translateX(-50%) translateY(18px);
    }
    55% {
      -webkit-transform: translateX(-50%) translateY(0px);
    }
    70% {
      -webkit-transform: translateX(-50%) translateY(2px);
    }
    85% {
      -webkit-transform: translateX(-50%) translateY(0px);
    }
    100% {
      -webkit-transform: translateX(-50%) translateY(0);
    }
  }
</style>
